<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>user Demo</title>
<!--    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>-->
    <script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="display: flex; justify-content: center; margin: 15px;">
    <input id="inputName" type="text">
    <input style="margin-left: 15px" value="输入用户名查询用户信息" type="submit" onclick="findUser()">
</div>
<div style="display: flex; justify-content: center; margin: 15px;">
    <label for="inputName1">输入用户名</label><input id="inputName1" type="text">
    <label for="inputPassword1">输入密码</label><input id="inputPassword1" type="text">
    <input style="margin-left: 15px" value="插入用户" type="submit" onclick="insertUser()">
</div>
</body>

<script>
    function findUser() {
        const userName = $("#inputName").val();
        $.ajax({
            url: '/search',          // 请求地址
            type: 'GET',              // 请求方法 GET/POST/PUT/DELETE
            dataType: 'json',         // 预期返回的数据类型
            data: { name: userName }, // 发送到服务器的数据
            success: function(data) { // 请求成功回调
                console.log('成功:', data);
                // $.each(data, function (index, value) {
                //     alert(value.name + " " + value.id)
                // })
                alert(data.name + " " + data.password)
            },
            error: function(xhr, status, error) { // 请求失败回调
                console.error('错误:', status, error);
            }
        });
    }

    function insertUser() {
        const userName = $("#inputName1").val();
        const password = $("#inputPassword1").val();
        $.post('/insertUser', {name: userName, password: password}, function(data) {
            console.log('成功:', data);
            alert("insert success");
        }, 'json');
    }
</script>
</html>